<template>
  <div class="box-bpdy box-primary">
    <div class="form-horizontal">
      <div class="box-body">
        <div class="form-group">
          <label class="col-md-3 control-label my-label">角色名称:</label>
          <div class="col-sm-9">
            <el-input v-model="name" placeholder="请输入角色名称" :disabled="isReadOnly"></el-input>
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-3 control-label my-label">功能授权:</label>
          <div class="col-sm-9">
            <el-select v-model="roles" multiple placeholder="请选择">
              <el-option
                v-for="item in functions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-3 control-label my-label">数据授权:</label>
          <div class="col-sm-9">
            <el-select v-model="query" placeholder="请选择">
              <el-option
                v-for="item in dataPrivs"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RestApi from "../../../common/restapi"
import multiselect from 'vue-multiselect'
export default {
  name: "roleEdit",
  props: ["role"],
  data() {
    return {
      isReadOnly: false,
      name: '',
      query:1,
      roles:[0],
      reportPrivs: [
        { id: 1, name: '基本报表' },
        { id: 2, name: '高级报表' }
      ],
      dataPrivs: [
        { id: 0, name: '限看本人数据' },
        { id: 1, name: '限查看本部门数据' },
        { id: 2, name: '限查看除中心领导外数据' },
        { id: 3, name: '允许查看所有数据' },
      ],
      functions: [
        { id: 0, name: '基础权限' },
        { id: 1, name: '修改权限' },
        { id: 2, name: '审核权限' },
        { id: 4, name: '管理权限' },
        { id: 8, name: '首页权限' }
      ]
    }
  },
  created: function() {
    if(this.role){
      this.name=this.role.name
      this.query=this.role.query
      this.roles = [0]
      if( (this.role.roles & 1 )== 1){
        this.roles.push(1)
      }
      if( (this.role.roles & 2) == 2){
        this.roles.push(2)
      }
      if( (this.role.roles & 4 )== 4){
        this.roles.push(4)
      }
      if( (this.role.roles & 8 )== 8){
        this.roles.push(8)
      }
    }
  },
  mounted: function() {
  },
  methods: {
    getRole(){
      var roles = 0
      for(var item in this.roles){
        roles = roles | this.roles[item]
      }
      if(this.role){
          return {
            id:this.role.id,
            name:this.name,
            query:this.query,
            roles:roles
        }
      }
      else
        return {
          name:this.name,
          query:this.query,
          roles:roles
        }
    }
  }
}
</script>

